<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机构列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        h3 a{
            text-decoration: none;
            color: black;
        }
        .cell{
            text-align: center;
        }
        .is-leaf{
            color: rgb(111, 174, 217);
        }
    </style>
</head>
<body>
<h3>
    <a href="">仓库管理</a>
</h3>
<div id="app">
        <template>
            <el-form :inline="true" class="demo-form-inline" size="mini">
            <el-select v-model="menu"
                       multiple
                       filterable
                       allow-create
                       default-first-option
                       placeholder="请选择文章标签">
            <el-option
                    v-for="item in menus"
                    :key="item.menu"
                    :label="item.wareName"
                    :value="item.wareName">
            </el-option>
            </el-select>
            <el-form-item label="创建时间">
                <el-col>
                    <el-date-picker
                            @change="dateChange(date)"
                            type="date" placeholder="选择日期"
                            v-model="date" style="width: 145px;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="save()">查询</el-button>
            </el-form>
    </template>
        <template>
        <el-table style="width: 100%"
                  :data="menus"
                  ref="siteTable">
            <el-table-column label="id" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="编号" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.wareNo }}</span>
                </template>
            </el-table-column>
            <el-table-column label="仓库名称" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.wareName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="负责人" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.person }}</span>
                </template>
            </el-table-column>
            <el-table-column label="联系电话" width="150">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
                </template>
            </el-table-column>
            <el-table-column label="货区数目" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.cargoNum }}</span>
                </template>
            </el-table-column>
            <el-table-column label="仓库描述" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.describes }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.deteTime }}</span>
                </template>
            </el-table-column>

                <el-table-column label="仓库状态" width="150">
                    <template slot-scope="scope">
                <el-switch
                        v-model="scope.row.status"
                        active-text="启用"
                        active-color="#13ce66"
                        @change="menusStatus(scope.row.id,scope.row.status)"
                        inactive-text="禁用" style="font-size: 9px">
                </el-switch>
                    </template>
                </el-table-column>

            </el-table-column>
            <el-table-column label="详细地址" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.address }}</span>
                </template>
            </el-table-column>
            <el-table-column label="经纬度" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.position }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-popconfirm icon-color="red" title="确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
                        <el-button size="mini" icon="el-icon-delete" type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>
        <div class="block" style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="page_size"
                           :page-size="4"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="count"
                           :background="back">
            </el-pagination>
        </div>
        <el-button style="margin-top: 10px;" icon="el-icon-plus" size="mini"  @click="dialog">添加仓库
        </el-button>

        <el-dialog title="仓库设置" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog()">
            <el-form :model="menu">
                <el-form-item label="仓库编号">
                    <el-input v-model="menu.wareNo" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="menu">
                <el-form-item label="仓库名称">
                    <el-input v-model="menu.wareName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="menu">
                <el-form-item label="负责人">
                    <el-input v-model="menu.person" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="menu">
                <el-form-item label="联系电话">
                    <el-input v-model="menu.telephone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="menu">
                <el-form-item label="货区数目">
                    <el-input v-model="menu.cargoNum" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="menu">
                <el-form-item label="仓库描述">
                    <el-input v-model="menu.describes" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="menu">
                <el-form-item label="详细地址">
                    <el-input v-model="menu.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="menu">
                <el-form-item label="经纬度">
                    <el-input v-model="menu.position" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrgan()">确 定</el-button>
            </div>
        </el-dialog>
    </template>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                // 当前页数
                currentPage: 1,
                // 订单总数
                count: 0,
                // 每页的数据
                page_size: [6, 3],
                // 当前每页的数据
                pageSize: 6,
                // 分页背景
                back: true,
                menus: [],
                menu: {},
                menun:{},
                // 货区创建日期
                date: null,
                dialogFormVisible: false,
                flag: 0,
                search:{},
                tableData:{},
            }
        },
        methods:{
            // 加载仓库
            loadOrgans() {
               axios.get("/menus/" + this.currentPage + "/" + this.pageSize)
                    .then(res => {
                        this.menus = res.data.records;
                        this.count = res.data.total;
                    })
            },
            dateChange(date){
                if (date == null){
                    return;
                }
                let Y = date.getFullYear() +  '-' ;
                let M = (date.getMonth()+1 < 10 ?  '0' +(date.getMonth()+1) : date.getMonth()+1) +  '-' ;
                let D = date.getDate() +  ' ' ;
                this.date = Y+M+D;
            },
            // 更新仓库状态
            menusStatus(id){
                console.log(id);
               axios.put("/menu/" +id)
                    .then(res => {
                        if(res.data == "ok"){
                            this.$message({
                                type: "success",
                                message: "更新成功"
                            })
                        }
                    })
            },
            //分页模糊查询
            loadWarehouse(){
                 this.loadOrgans();
                console.log(this.menu);
                console.log(this.date);
                    console.log(111);
                axios.get("/menu/" + this.currentPage + "/" + this.pageSize+"?wareName="+this.menu+"&deteTime="+this.date)
                    .then(res => {
                        this.menus = res.data.records;
                        this.count = res.data.total;
                    })
            },
            //模态框状态
            dialog() {
                this.menu = {};
                this.dialogFormVisible = true;
                this.al = false;
            },
            // 更新,添加仓库
            saveOrgan() {
                if (this.flag == 0) {
                    this.axios.post("/menu", this.menu)
                        .then(res => {
                            if (res.data == "ok") {
                                this.loadOrgans();
                            }
                        });
                } else {
                    this.axios.put("/menu", this.menu)
                        .then(res => {
                            if (res.data == "ok") {
                                this.loadOrgans();
                            }
                        });
                }
                this.dialogFormVisible = false;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadOrgans();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadOrgans();
            },
            handleEdit:function(index, row) {
                this.flag = 1;
                console.log(row);
                this.menu = row;

                this.dialogFormVisible = true;
            },
            // 删除仓库
            handleDelete(index, row) {
                if (this.menus.length == 1) {
                    this.currentPage = this.currentPage - 1;
                }
                axios.delete("/menu/" + row.id)
                    .then(res => {
                        if (res.data == "ok") {
                            this.loadOrgans();
                        }
                    });
            },

            closeDialog() {
                this.flag = 0;
                this.site = {};
            },
            save(){
                this.loadWarehouse();
            },
        },
        mounted() {
            this.loadOrgans();
        }
    });
</script>
</html>